<template>
  <div class="catalog-title">{{catalog_name}}</div>
  <div class="custom-tree-node-container">
   <el-input v-model="filterText" placeholder="请输入关键词" class="el-input-key" />
    <el-tree
      ref="treeRef"
      :data="data"
      node-key="name"
      highlight-current
      :default-expand-all="tree_props.expand_all"
      :accordion="tree_props.accordion"
      @node-click="onClickNode"
      auto-expand-parent
      :indent="1"
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
      :props="defaultProps"
    />
  </div>
</template>

<script setup>
import { ElTree, ElTreeV2 } from 'element-plus';
import {  onMounted, onUpdated, reactive, ref, watch } from 'vue-demi';
import { Video } from '../model/resource';

const catalog_name = ref('')
const props = defineProps({
    id: {
        default: 17//17
    },
    name: { default: '3-5 如何通过OpenCV保存文件'}
})


// ElTree.setCurrentKey('第3章 图像&视频的加载与展示')
const tree_props = reactive({
    expand_all: false,
    accordion: false
})

const defaultProps = {
  children: 'children',
  label: 'name',
  class: function(data){
      if(data.type==1){// 视频
          return 'video-node'
      }else if ( data.type == 2){ // 章节
          return 'chapter-node'
      }else if (data.type == 3){ // 课程
        
      }
  }
}
// interface Tree {
//   id: number
//   name: string
//   isPenultimate?: boolean
//   children?: Tree[]
// }
// filter模式

const filterText = ref('')
const treeRef = ref()



watch(filterText, (val) => {
    // if (val.length>0){
        if (treeRef.value)
            treeRef.value.filter(val)
    // }
    // else{
        // if (treeRef.value)
        //     treeRef.value.filter(val)
        // console.log('进入', tree_props.expand_all)
        // tree_props.expand_all = false
        // accordion.value = true
    // }
})

const filterNode = (value, data) => {
  if (!value) return true
  console.log(data)
  return data.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
}

const emits = defineEmits()

// 事件
const onClickNode = async (item, p2, event) => {
    if (item.type == 1){
        let v_id = item.id
        let item_data = await new Video().get(v_id)
        emits('clickCatalogVideo', item_data)
    }
}

const data = ref([])
onMounted(async ()=>{
    let result = (await (new Video().getCatalog(props.id)))
    // data.value = result.children
    if(result.children){
        catalog_name.value = result.name
        let item = result.children[0]
       if (item.type == 1){ // 章节目录
          data.value = [result]
       }else{
           data.value = result.children
       }
    }else{
        // 就不应该显示
        catalog_name.value = "该视频无目录"
    }
})
onUpdated(()=>{
    // ELTree有关的操作
    treeRef.value.setCurrentKey(props.name)// 设置选中的节点
})
</script>

<style lang="scss">

.chapter-node{
    background-color: #e2f7ed !important;
    color: #42716b;
    font-weight: 500 !important;
    font-size: 40px !important;
}

.video-node{
    background-color: #f8fdfe !important;
    color: #161f10;
    
}

// 鼠标覆盖
.el-tree-node__content:hover{
    color: #e56363;
    font-size: 50px !important;
}

// 高亮
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
    color: #880dd9 !important;
}

.catalog-title{
    font-size: 20px;
    margin: 5px 2px;
}

.el-input-key{
    width: 350px;
    margin: 5px;
    background: #d0eabc !important;
}

</style>
